<template>
  <div>
    <div>平移旋转缩放</div>
    <div id="axes">删除坐标辅助</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  // import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
  // import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(500, 500, 500);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    // console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
    boxGeometry.translate(30, 0, 0);
    const material = new THREE.MeshBasicMaterial({
      color: 0x12a60a,
    });

    const materialMesh = new THREE.Mesh(boxGeometry, material);
    //   materialMesh.translateX(40);
    scene.add(materialMesh);

    function renderFun() {
      // console.log('asdfasdf');
      materialMesh.rotateY(0.01);

      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
    document.getElementById('axes')?.addEventListener('click', () => {
      // scene.traverse(function (obj) {
      //   //   console.log("所有模型节点的名称", obj);
      //   if (obj.type == "AxesHelper" && obj.visible) {
      //     //判断条件也可以是obj.type === 'Mesh'
      //     // obj.visible = false;
      scene.remove(helper);
      //   } else {
      //     // obj.visible = true;
      //   }
      // });
      console.log('scene', scene);
    });
  }
</script>
